<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="编号" prop="tid" align="center">
			</el-table-column>
			<el-table-column label="题目" prop="title" align="center">
			</el-table-column>
			<el-table-column label="创建时间" prop="create_time" align="center">
			</el-table-column>
			<el-table-column label="修改时间" prop="update_time" align="center">
			</el-table-column>
			<!-- <el-table-column align="right">
				<template slot="header" slot-scope="scope">
					<el-input size="mini" placeholder="输入关键字搜索" />
				</template>
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index,
	scope.row)">Edit</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete
					</el-button>
				</template> -->
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index,
				scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="[6, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
		 style="margin-top: 20px; text-align: right">
		</el-pagination>
	</div>
</template>

<script>
	import Cookies from "js-cookie";
	export default {
		name: "Question",
		data() {
			return {
				tableData: [], // 当前页数据
				allData: [], // 新增：存储所有数据
				currentPage: 1,
				pageSize: 6,
				total: 0
			};
		},
		mounted() {
			this.queryAllData();
		},
		methods: {
			// 获取全部数据
			queryAllData() {
				let _this = this;
				const loginName=Cookies.get("loginName");
				this.$axios
					.get("/question/list",{params:{
						loginName:loginName
					}})
					.then(function(response) {
						_this.allData = response.data; // 存储全部数据
						_this.total = _this.allData.length;
						_this.updateTableData(); // 更新显示数据
						// console.log('接口返回数据：', response.data); // 查看实际数据结构
					})
					.catch(console.error);
			},

			// 更新当前页数据
			updateTableData() {
				const start = (this.currentPage - 1) * this.pageSize;
				const end = start + this.pageSize;
				this.tableData = this.allData.slice(start, end);
			},

			// 删除处理
			handleDelete(index, row) {
				if (!confirm("确定删除吗?")) return;

				// 先删除后端数据
				this.$axios.delete("/question", {
						params: {
							tid: row.tid
						}
					})
					.then(() => {
						// 从前端数据中移除
						this.allData = this.allData.filter(item => item.tid !== row.tid);
						this.total = this.allData.length;

						// 3. 计算最新页码（关键修复）
						const maxPage = Math.ceil(this.total / this.pageSize);
						if (this.currentPage > maxPage) {
							this.currentPage = maxPage > 0 ? maxPage : 1;
						}

						// 4. 强制刷新显示数据
						this.updateTableData();

						// 5. 当数据为空时的处理
						if (this.total === 0) {
							this.tableData = [];
						}
					})
					.catch(console.error);
			},

			// 分页事件
			handleSizeChange(val) {
				this.pageSize = val;
				this.currentPage = 1;
				this.updateTableData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.updateTableData();
			},
			//修改跳转到编辑页面
			handleEdit(index, row) {
				this.$router.push({
					name: 'AddOrEditQuestion',
					params: {
						tid: row.tid,
						title: row.title,
					}
				});
			}
		}
	};
</script>

<style>
</style>
